<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>采购订单录入页面</title>
<script type="text/javascript" src="/jquery_lib/jquery-1.8.2.min.js"></script>
</head>

<script type="text/javascript">
			function addItem(){
				//console.debug($("#item_table"));
				var newItem = $("#item_table tr:last").clone();
				$(newItem).find("td[cmd]").html('');
				$(newItem).find("input[cmd]").val('');
				$(newItem).appendTo($("#item_table"));
			}
			
			function addItem2(){
				var newItem = $("#item_table tr:last").clone();
				$(newItem).find("td[cmd]").html('');
				$(newItem).find("input[cmd]").val('');
				$(newItem).appendTo($("#item_table"));
			}
			
			//动态的给新添加的按钮注册事件.已经是JQUERY对象后,用FIND方法找它里面的元素.
			$(function(){
				var item = $("#item_table");
				item.find("input[name=add]").live("click",function(){
					var values = window.showModalDialog("product_list","","");
					var tr = $(this).closest("tr");
					
					//下面就给每一行的列赋值.
					$(tr).find("input[cmd=p_id]").val(values[0]);
					$(tr).find("td[cmd=name]").html(values[1]);
					$(tr).find("td[cmd=xinghao]").html(values[2]);
					var price = $(tr).find("input[cmd=p_price]").val(values[3]);
					var num = $(tr).find("input[cmd=p_num]").val('');
					$(tr).find("td[cmd=total]").html('');
					//console.debug(price*num);不知道为什么,这儿一加载完,我就计算它们的值 .它说是NAN
				});
				
				//同时给多个元素注册事件,在一对引号内,用逗号隔开.
				item.find("input[cmd=p_price],input[cmd=p_num]").live("change",function(){
					console.debug(this);
					var tr = $(this).closest("tr");
					var num = $(tr).find("input[cmd=p_num]").val();
					var price = $(tr).find("input[cmd=p_price]").val();
					$(tr).find("td[cmd=total]").html(num*price);
				});
				
				
				//这里是删除产品项.但是至少要留一行.
				$("#item_table input[name=remove]").live("click",function(){
						if($("#item_table tr").size()>2){
							$(this).closest("tr").remove();
						}
					});
				
				$("#changeIndex").click(function(){
					$("#item_table tr:gt(0)").each(function(index,item){
						$(item).find("input[cmd=item_id]").attr("name","billItems["+index+"].id");
						$(item).find("input[cmd=p_id]").attr("name","billItems["+index+"].product.id");
						$(item).find("input[cmd=p_price]").attr("name","billItems["+index+"].price");
						$(item).find("input[cmd=p_num]").attr("name","billItems["+index+"].num");
					});
					
					$("#bill_form").submit();
				});
				
			});
</script>
<body>
	<fieldset>
		<legend>订单录入</legend>
		<s:form action="bill_save" method="post" id="bill_form">
		<table>
		<tr>
			<td><s:hidden name="bill.id"/></td>
			<td>订单编号:<s:textfield name="bill.sn" size="15px" /></td>
			<td>供应商:
				<s:select list="#suppliers" listKey="id" listValue="name" name="bill.supplier.id"
					cssStyle="width:80px"/>
			</td>
		</tr>
		</table>
		</br>
		
		
		
		<s:if test="bill.id==null">
			<table border="1" id="item_table" width="100%">
			<tr>
				<th width="150px">编号</th>
				<th>名称</th>
				<th>型号</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<input type="button" value="添加订单项" onclick="addItem()"/>
			<tr>
				<td>
					<s:hidden name="billItems[0].id" cmd="item_id"/>
					<s:hidden name="billItems[0].product.id" cmd="p_id"/>
					<s:textfield cmd="sn" name="billItems[0].product.sn"/>
					<input name="add" readonly="readonly" type="button" value="添加产品"/></td>
				<td cmd="name"></td>
				<td cmd="xinghao"></td>
				<td ><s:textfield cmd="p_price" name="billItems[0].price"/></td>
				<td ><s:textfield cmd="p_num" name="billItems[0].num"/></td>
				<td cmd="total"></td>
				<td><input type="button" value="删除" name="remove" o/></td>
			</tr>
		</table>
	</s:if>
	
<!-- --------------------------------上面的是新建的页面-------------------------------------------------- -->
		<s:else>
			<input type="button" value="添加订单项" onclick="addItem2()"/>
			<table border="1" id="item_table" width="100%">
			<tr>
				<th width="150px">编号</th>
				<th>名称</th>
				<th>型号</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<s:iterator value="bill.items">
				<tr>
				<td>
					<s:hidden name="id" cmd="item_id"/>
					<s:hidden name="product.id" cmd="p_id"/>
					<s:textfield cmd="sn" name="product.sn"/>
					<input name="add" readonly="readonly" type="button" value="添加产品"/></td>
				<td cmd="name"></td>
				<td cmd="xinghao"><s:property value="product.name"/></td>
				<td ><s:textfield cmd="p_price" name="price"/></td>
				<td ><s:textfield cmd="p_num" name="num" /></td>
				<td cmd="total"><s:property value="amount"/></td>
				<td><input type="button" value="删除" name="remove"/></td>
				</tr>
			</s:iterator>
		</table>
		</s:else>
			</br>
			<input type="button" value="提交" id="changeIndex"/>
		</s:form>
	
	</fieldset>
</body>
</html>